{% extends "base.html" %}
{% block title %}编辑角色{% endblock %}
{% block content %}
    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            编辑角色
        </div>
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li><a href="#">Amaze UI CSS</a></li>
            <li class="am-active">文字列表</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="tpl-block">
                <div class="am-form">
                    <div class="am-form-group">
                        <label for="doc-ipt-email-1" class="role_form_title">角色名</label>
                        <input type="email" class="" id="name" placeholder="请输入角色名" value="{{ role.name }}">
                    </div>
                    <div class="am-form-group">
                        <label for="doc-ta-1" class="role_form_title">描述</label>
                        <textarea class="" rows="5" id="desc" placeholder="请输入描述">{{ role.desc }}</textarea>
                    </div>
                </div>
                <hr>
                <div class="permission">
                    <div>
                        <label class="role_form_title">权限</label>
                    </div>
                    <div>
                        <a id="all_select" href="javascript:void(0);">全选</a> / <a id="reverse_select" href="javascript:void(0);">反选</a>
                    </div>
                    {% from 'macros.html' import permission_checkbox with context %}
                    {{ permission_checkbox(all_menu, role_menus) }}
                </div>
                <div style="margin-top: 30px;">
                    <button id="submit" type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block myscript %}
    <script type="text/javascript">
        $('input:checkbox').on('click',function(e){
            var selector = '.checkbox-'+$(this).val();
            var child = $(selector).find('.child');
            if($(this).hasClass('parent')){
                if(child.length > 0){
                    child.prop('checked', !check_all_checked(child));
                    $(this).prop('checked', check_all_checked(child));
                }
            }else {
                var brother = $(selector).parent().find('.child');
                var father_id = $(selector).attr('father-id');
                $('.checkbox-'+father_id).find('.parent').prop('checked', check_has_select(brother));
            }
        })
        function check_has_select(doms){
            var has_select = false;
            for(var i=0;i<doms.length;i++){
                if(doms.eq(i).prop('checked')){
                    has_select = true;
                    break
                }
            }
            return has_select
        }
        function check_all_checked(doms){
            var all_checked = true;
            for(var i=0;i<doms.length;i++){
                if(!doms.eq(i).prop('checked')){
                    all_checked = false;
                    break
                }
            }
            return all_checked;
        }
        $('#all_select').on('click', function (e) {
            $('.permission input:checkbox').prop('checked', true)
        });
        $('#reverse_select').on('click', function (e) {
            var select = $('.permission input:checkbox:checked');
            var no_select = $('.permission input:checkbox:not(:checked)');
            select.prop('checked', false);
            no_select.prop('checked', true);
            $('.parent').each(function(index,ele){
                var selector = '.checkbox-'+$(ele).val();
                var child = $(selector).find('.child');
                if(child.length > 0 && check_has_select(child)){
                    $(ele).prop('checked', true)
                }
            })

        })
        $('#submit').on('click',function(event){
            if($(this).hasClass('disable'))return;
            var menus = [];
            $('.permission input:checkbox:checked').each(function(index,ele){
                menus.push($(ele).val())
            });
            var postData = {
                name:$('#name').val(),
                desc:$('#desc').val(),
                menus:menus,
                id: {{ role.id }}
            }
            if(postData.name == ''){
                layer.alert('角色名不能为空',{icon: 2})
                return;
            }
            if(postData.desc == ''){
                layer.alert('角色描述不能为空',{icon: 2})
                return;
            }
            if(postData.menus.length <= 0){
                layer.alert('权限不能为空',{icon: 2})
                return;
            }
            $(this).addClass('disable');
             var index = layer.load(1, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
            ME.sendRequest('{{ url_for("role.do_update_role") }}','POST',postData,function(res){
                if(res.state == 200){
                    layer.msg('修改成功', {icon: 1});
                    window.location.reload();
                }
            })
        })
    </script>
{% endblock %}